<template>
  <div>
    {{sum}}
    <hr>
    {{msg}}
    <hr>
    <hr>
    <input type="text" v-model="person.fullName">
  </div>
</template>

<script>
  import {ref,reactive,watch} from 'vue'
  export default {
    setup(){
      let sum = ref(0)
      let msg = ref('message')
      // 监视ref的1个响应式数据变化
      // watch(sum,(newValue,oldValue)=>{
      //   console.log(newValue,oldValue)
      // })
      // 监视ref的多个个响应式数据变化
      // watch([sum,msg],(newValue,oldValue)=>{
      //   console.log(newValue,oldValue)
      // })
      // watch的第三个参数是配置
      // watch(sum,(newValue,oldValue)=>{
      //   console.log(newValue,oldValue)
      //   // immediate是加载即调用
      //   // deep是检测对象的所有属性
      // },{immediate:true,deep:true})

      let person = reactive({
        name:"zhangsan",
        age:18,
        job:{
          sex:"1",
          work:"zzz"
        }
      })
      //watch监视reactive对象的变化
      // 此处无法获得oldvalue
      // 且强制开启了深度监视，deep配置无效了
      watch(person,(newValue,oldValue)=>{
        console.log(newValue,oldValue)
      })
      //watch监视reactive对象的某个属性的变化，只能写成函数
      watch(()=>person.age,(newValue,oldValue)=>{
        console.log(newValue,oldValue)
      })
      //watch监视reactive对象的几个属性的变化，只能写成函数
      watch([()=>person.age,()=>person.name],(newValue,oldValue)=>{
        console.log(newValue,oldValue)
      })
      //watch监视reactive对象的属性是对象的属性变化，只能写成函数，且要打开deep
      watch(()=>person.job,(newValue,oldValue)=>{
        console.log(newValue,oldValue)
      },{deep:true})

      return {
        person,
      }
    },
  }
</script>
